<template>
    <div class="account">
        <div class="content-user">
            <div class="item-inner" style="text-align: right;padding: 15px 15px 0px 0px;">
                <!--<a class="external sign-button">-->
                <!--签到-->
                <!--</a>-->
                <van-button type="primary" size="mini" class="sign-button" @click="goToView('/mySignIn')">签到</van-button>
            </div>
            <div class="user-icon">
                <img class="round_icon" :src="userInfo.headImgUrl"/>
                <div style="margin-top: 10px;" class="icon-title">
                    <span style="font-size: 16px;">{{username}}
                        <van-icon name="edit" @click="goToView('/personInf')"/>
                    </span>


                </div>
            </div>
        </div>
        <div class="item-list-container">
            <van-row>
                <van-col span="6" v-for="item,index in selectBoxItems" :key="index">
                    <div class="select-box select-box-account-height" @click="goToView(item.path)">
                        <img class="iconRowWidth" :src="item.icon">
                        <div style="margin-top: 0px;">{{item.title}}</div>
                    </div>
                </van-col>

                <!--<van-col span="6">-->
                <!--<div class="select-box select-box-account-height"  @click="goToView('/coupon_mine')" >-->
                <!--<img src="/images/icon1-3.png">-->
                <!--<div style="margin-top: 8px;">我的卡券</div>-->
                <!--</div>-->
                <!--</van-col>-->

                <!--<van-col span="6">-->
                <!--<div class="select-box select-box-account-height" @click="goToView('/ActivityCalendar')">-->
                <!--<img src="/images/icon1-2.png">-->
                <!--<div style="margin-top: 8px;">演艺活动</div>-->
                <!--</div>-->
                <!--</van-col>-->

                <!--<van-col span="6">-->
                <!--<div class="select-box select-box-account-height" @click="goToView('/')">-->
                <!--<img src="/images/icon1-4.png">-->
                <!--<div style="margin-top: 8px;">商城活动</div>-->
                <!--</div>-->
                <!--</van-col>-->
            </van-row>
        </div>
        <div class="nav-list-container">
            <item-cell-group v-for="(item ,index) in items"
                             :key="index"
                             :item="item"/>
        </div>
        <div class="item_activitys">
        </div>

    </div>
</template>

<script>
    import ItemCellGroup from '@/components/ItemCellGroup'
    import Cookies from 'js-cookie'
    import {Toast, Dialog, Button} from 'vant';
    import {mapState} from 'vuex'
    import {goToView} from '@/utils/tools'

    export default {
        name: "Account",
        components: {
            ItemCellGroup
        },
        mounted(){
            this.token = Cookies.get("token")
            this.$api.personInf.personInfo({openid:this.token}).then(res=>{
                if(res.code==0){
                    var data = JSON.parse(res.data)
                    console.log(data)
                    var success = data.success
                    if(!success) {
                        Toast('获取数据失败！')
                        return
                    }
                    this.username = data.username
                }
            }).catch(err=>{
                console.log(err)
            })
        },
        data() {
            return {
                username:'',
                selectBoxItems: [
                    {title: '会员卡', path: '/memberCard', icon: '/images/account/account1.png',},
                    // {title: '会员卡', path: '', icon: '/images/account/account1.png',},
                    {title:'我的卡券',path:'/coupon_mine',icon: '/images/account/account2.png',},
                    // {title: '我的卡券', path: '', icon: '/images/account/account2.png',},
                    {title: '热门活动', path: '/ActivityCalendar', icon: '/images/account/account3.png',},
                    {
                        title: '会员商城',
                        path: 'https://weidian.com/?userid=1386795757&distributorid=1292589238&wfr=wx_wxh5&ifr=shopdetail&share_relation=d886e1e688610ec2_1292589238_2',
                        icon: '/images/account/account4.png',
                    },
                   // {title:'会员商城',path:'',icon: '/images/account/account4.png',}
                ],
                items: [
                    {
                        title: "我的",
                        size: 'large',
                        fontColor: '#787ac3!important',
                        children: [
                            {
                                title: '我的积分',
                                size: 'large',
                                icon: '/images/account/jifen.png',
                                to: "myIntegral"
                            },
                            // {
                            //     title: '我的卡券',
                            //     size: 'large',
                            //     icon: '/images/icon3.png',
                            //     to: "coupon_mine"
                            // },
                            {
                                title: '停车管理',
                                size: 'large',
                                icon: '/images/account/tingche.png',
                                to: "parking_pay"
                            },
                            {
                                title: '中奖信息',
                                size: 'large',
                                icon: '/images/account/zhongjiang.png',
                                to: "order"
                            }
                        ]
                    },
                    {
                        title: "积分",
                        size: 'large',
                        fontColor: '#787ac3!important',
                        children: [
                            {
                                title: '拍照积分',
                                size: 'large',
                                icon: '/images/account/paizhao.png',
                                to: "take_photo"
                            },
                            {
                                title: '积分攻略',
                                size: 'large',
                                icon: '/images/account/gonglve.png',
                                to: "strategy"
                            }
                        ]
                    },
                    {
                        title: "好礼",
                        size: 'large',
                        fontColor: '#787ac3!important',
                        children: [
                            {
                                title: '积分商城',
                                size: 'large',
                                icon: '/images/account/shangcheng.png',
                                to: "integrallist"
                            },
                            {
                                title: '推荐有礼',
                                size: 'large',
                                icon: '/images/account/fenxiang.png',
                                to: "recommend_activity"
                            },
                            {
                                title: '分享有礼',
                                size: 'large',
                                icon: '/images/account/fenxiang.png',
                                to: "share"
                            },
                            {
                                title: '抢优惠券',
                                size: 'large',
                                icon: '/images/account/kaquan.png',
                                to: "coupon_list"
                            },
                            {
                                title: '转盘抽奖',
                                size: 'large',
                                icon: '/images/account/zhuanpan.png',
                                to: "/dial"
                            }
                        ]
                    },
                    {
                        title: "权益",
                        size: 'large',
                        fontColor: '#787ac3!important',
                        children: [
                            {
                                title: '会员章程',
                                size: 'large',
                                icon: '/images/account/zhangcheng.png',
                                to: "regulations"
                            },
                            {
                                title: '会员服务',
                                size: 'large',
                                icon: '/images/account/fuwu.png',
                                to: "serve"
                            }
                        ]
                    },
                    {
                        title: "服务",
                        size: 'large',
                        fontColor: '#787ac3!important',
                        children: [
                            {
                                title: '交通指南',
                                size: 'large',
                                icon: '/images/account/jiaotong.png',
                                to: "traffic"
                            },
                            {
                                title: '停车指南',
                                size: 'large',
                                icon: '/images/account/tingche.png',
                                to: ""
                                // to: "parking"
                            },
                            // {
                            //     title: '购物中心',
                            //     size: 'large',
                            //     icon: '/images/account/tingche.png',
                            //     to: "shopping"
                            //     // to: "parking"
                            // },
                            // {
                            //     title: '演艺中心',
                            //     size: 'large',
                            //     icon: '/images/account/tingche.png',
                            //     to: "performance"
                            //     // to: "parking"
                            // },
                            // {
                            //     title: '商家入驻',
                            //     size: 'large',
                            //     icon: '/images/account/tingche.png',
                            //     to: "join"
                            //     // to: "parking"
                            // },
                            // {
                            //     title: '商业指南',
                            //     size: 'large',
                            //     icon: '/images/account/shangye.png',
                            //     to: "business"
                            // }
                        ]
                    }
                ]
            }
        },
        computed: {
            ...mapState({
                userInfo: state => state.user.userInfo
            }),
        },
        methods: {
            goToView(path) {
                if (!path || path.length <= 0) {
                    Toast("功能尚未开启，敬请期待！")
                    return;
                }
                if (path.indexOf('https') != -1) {
                    window.location.href = path;
                    return;
                }
                this.$router.push(path)
            }
        }
      
    }
</script>

<style lang="less" scoped>
    @import "../../assets/less/base";

    .account {
        .content-user {
            height: 140px;
            background: @main-theme-color;
            .user-icon {
                text-align: center;
                margin-top: -25px;
                .round_icon {
                    width: 65px;
                    height: 65px;
                    border-radius: 50%;
                    align-items: center;
                    justify-content: center;
                    overflow: hidden;
                }
                .icon-title {
                    color: #FFFFFF;
                    font-size: 17px;
                }
            }
        }
        .item-list-container {
            text-align: center;
            background-color: #FFFFFF;
            .select-box {
                text-align: center;
                border: 1px solid #e0e8f3;
                border-left: none;
                color: #000;
                font-size: 14px;
                padding: 10px 0;
            }

            .select-box-account-height {
                /*height: 80px;*/
            }

            .select-box-index-height {
                height: 105px;
            }
        }
        .nav-list-container {
            /*margin-top: 10px;*/
        }
        .item_activitys {
            margin-top: 10px;
        }
        .iconRowWidth {
            width: 45px;
        }
    }
</style>
